<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import {
  userListService,
  userDeleteService,
  userGetUserInfoService
} from '@/api/user'
import { datetimeformat } from '@/utils/datetimeformat.js'
const userList = ref([])
//用户信息回显
const userinfo = ref({})
const handleEidt = async (id) => {
  drawer.value = true
  const res = await userGetUserInfoService(id)
  console.log(res.data.data)
  userinfo.value.formmodel = res.data.data
}
const handleDelete = async (id) => {
  await ElMessageBox.confirm('确认删除？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true
  })
  await userDeleteService(id)
  ElMessage.success('删除成功')
  getUserList()
}
const avatar = ref({
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
})
//分页详情
const pageinfo = ref({
  currentpagenum: 1,
  pagesize: 5
})
const handleSizeChange = (val) => {
  pageinfo.value.pagesize = val
  getUserList()
}
const handleCurrentChange = (val) => {
  pageinfo.value.currentpagenum = val
  getUserList()
}
//用户总数
const pagetotal = ref()
const isLoding = ref(true)
//用户管理列表
const getUserList = async () => {
  const res = await userListService(pageinfo.value)
  // console.log(res)
  userList.value = res.data.data.data
  pagetotal.value = res.data.data.pageTotal - 1
  isLoding.value = false
}
getUserList()
//添加用户
const drawer = ref(false)
const adduser = () => {
  drawer.value = true
  userinfo.value.formmodel = userinfo.value.formmodel1
}
</script>
<template>
  <CommonHeader>
    <template #title>用户管理</template>
    <template #body>
      <el-space>
        <el-input :suffix-icon="Search">
          <template #prepend>
            <el-select
              v-model="select"
              placeholder="Select"
              style="width: 115px"
            >
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select> </template
        ></el-input>
        <el-button type="primary" plain>Search</el-button>
      </el-space>
      <el-button type="primary" @click="adduser">添加用户</el-button></template
    >
    <template #default>
      <el-table :data="userList" v-loading="isLoding">
        <el-table-column label="头像" prop="avatar">
          <template #default="scope">
            <el-avatar
              shape="square"
              :size="size"
              :src="scope.row.avatar ? scope.row.avatar : avatar.squareUrl"
            />
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex">
          <template #default="scope">
            {{ scope.row.sex === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="scope">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime">
          <template #default="scope">
            {{ datetimeformat(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="handleEidt(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageinfo.currentpagenum"
        v-model:page-size="pageinfo.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagetotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </template>
  </CommonHeader>
  <!-- 添加用户抽屉 -->
  <el-drawer v-model="drawer" title="添加用户">
    <AddUserbox
      v-model="drawer"
      ref="userinfo"
      @getUserList="getUserList"
    ></AddUserbox>
  </el-drawer>
</template>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
